import React from 'react'
import { Input, Radio, View, RadioGroup, Text } from '@tarojs/components'
import { Space } from '@/components/UiComponents'
const index = (props) => {
    const { data = {}, index, ChangeValue } = props
    const {
        title,
        label,
        require = false,
        desc,
        value = '',
        option = [],
        otherValue = ''
    } = data
    return <View className='CollectWps_box_content'>
        <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
        <View className='CollectWps_desc'>{desc}</View>
        <View className=''>
            <RadioGroup onChange={(e) => {
                ChangeValue({ index, value: { otherValue: '', value: e.detail.value } })
            }} value={value}>
                <Space className='CollectWps_font24' style={{ width: "100%" }} direction='vertical'>
                    {option.map((item, key) => {
                        const { type, label = '投票项' } = item
                        if (type === 'other') {
                            return <React.Fragment key={key}>
                                <Radio checked={value === label} value={label}><Text className='CollectWps_font24'>{label}</Text></Radio>
                                {value === label && <View className='CollectWps_input'>
                                    <Input value={otherValue} onInput={(e) => { ChangeValue({ index, value: { otherValue: e.detail.value } }) }}> </Input>
                                </View>}
                            </React.Fragment>
                        } else {
                            return <Radio checked={value === label} value={label}><Text className='CollectWps_font24'>{label}</Text></Radio>
                        }
                    })}
                </Space>
            </RadioGroup>
        </View>

    </View>
}
export default index